<script setup lang="ts">
const { safeAreaInsets } = uni.getSystemInfoSync()

import { getTagsGetTagsListAPI, getTouristRecommendAPI, getTagRecommendAPI } from '@/services/taglist'
import { ref } from "vue"
import { onLoad } from '@dcloudio/uni-app'

const tagList = ref<any>([])
const touristRecommend = ref<any>([])
const tags = ref<any>([])

const getTagListData = async () => {
    const res = await getTagsGetTagsListAPI()
    tagList.value = res.data
    console.log(res.data)
}

const getTouristRecommendData = async () => {
    const res = await getTouristRecommendAPI()
    touristRecommend.value = res.data
    console.log(res.data)
}

const getTagRecommendData = async (tag: any) => {
    touristRecommend.value = {}
    const res = await getTagRecommendAPI(tag)
    tags.value = res.data
    touristRecommend.value = tags.value
    console.log(res.data)
}

const Tags = async (id: any) => {
    await getTagRecommendData(id)
    console.log(id)
}

const add = () => {
    uni.navigateTo({
        url: '/pages/search/search'
    });
}


// 组件挂载后调用
onLoad(async () => {
    await Promise.all([getTagListData(), getTouristRecommendData()])
})
</script>

<template>
    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
        <view class="logo">
            <text class="logo-title">发现</text>
            <view @click="add">
                <view>
                    <text class="logo-text">搜索</text>
                </view>
            </view>
        </view>
    </view>
    <view class="divider"></view>
    <view class="nav">
        <view class="nav-list">
            <view class="nav-text active" v-for="(item, index) in tagList" :key="index" @click="Tags(item.id)">{{
        item.name }}</view>
        </view>
    </view>
    <view class="caption"></view>
    <view class="guess">
        <navigator class="guess-item" v-for="(item, index) in touristRecommend" :key="index"
            :url="`/pages/item/item?id=${item.id}`">
            <image class="image" mode="aspectFill" :src="item.img"></image>
            <view class="name">{{ item.scenicName }}</view>
            <view class="price">
                <image class="images" mode="aspectFill" :src="item.user.img"></image>
                <text class="small">{{ item.user.nickname }}</text>
                <text class="right">{{ item.avgExpenses }}</text>
            </view>
        </navigator>
    </view>
    <view class="loading-text"> 正在加载... </view>
    <!-- <view class="guess">
    <navigator
      class="guess-item"
      v-for="item in 2"
      :key="item"
      :url="`/pages/item/item`"
    >
      <image
        class="image"
        mode="aspectFill"
        src="https://img2.imgtp.com/2024/03/22/j2Cs0RLR.jpg"
      ></image>
      <view class="name">小红书创业搭子</view>
      <view class="price">
        <image class="images" mode="aspectFill" src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo310417n3fm0005o9tjdigjsib6d6ld08?imageView2/2/w/120/format/webp|imageMogr2/strip"
      ></image>
        <text class="small">流浪地球</text>
        <text class="right">88</text>
      </view>
    </navigator>
  </view> -->
</template>

<style lang="scss">
.nav .nav-list .active:active {
    color: red;
}

.viewport {
    background-color: #f4f4f4;
}

.divider {
    background: #E0E3DA;
    width: 100%;
    height: 5rpx;
}

.navbar {
    background-size: cover;
    display: flex;
    justify-content: space-around;

    .logo {
        display: flex;
        align-items: center;
        height: 86rpx;
        padding: 20rpx;

        .logo-image {
            width: 40rpx;
            height: 40rpx;
        }

        .logo-title {
            font-size: 32rpx;
            color: #000;
            font-weight: bold;
        }

        .logo-text {
            flex: 1;
            line-height: 28rpx;
            color: #000;
            margin: 2rpx 0 0 20rpx;
            padding-left: 20rpx;
            border-left: 1rpx solid #fff;
            font-size: 26rpx;
        }
    }
}

.nav {
    background-size: cover;
    display: flex;
    justify-content: space-around;

    .nav-list {
        display: flex;
        align-items: center;
        height: 86rpx;
        padding: 20rpx;

        .nav-title {
            font-size: 32rpx;
            color: #000;
            font-weight: bold;
        }

        .nav-text {
            flex: 1;
            line-height: 28rpx;
            color: #000;
            margin: 2rpx 0 0 20rpx;
            padding-left: 20rpx;
            border-left: 1rpx solid #fff;
            font-size: 26rpx;
        }
    }
}

:host {
    display: block;
}

/* 分类标题 */
.caption {
    display: flex;
    justify-content: center;
    line-height: 1;
    // padding: 36rpx 0 40rpx;
    font-size: 32rpx;
    color: #262626;

    .text {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 28rpx 0 30rpx;

        &::before,
        &::after {
            content: '';
            width: 20rpx;
            height: 20rpx;
            background-size: contain;
            margin: 0 10rpx;
        }
    }
}

.guess {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;

    .guess-item {
        width: 345rpx;
        padding: 24rpx 20rpx 20rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-color: #fff;
    }

    .image {
        width: 304rpx;
        height: 304rpx;
    }

    .images {
        width: 60rpx;
        height: 60rpx;
        border-radius: 100%;
    }

    .name {
        height: 40rpx;
        margin: 10rpx 0;
        font-size: 26rpx;
        color: #262626;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .price {
        line-height: 1;
        padding-top: 4rpx;
        color: #000;
        font-size: 26rpx;
    }

    .small {
        font-size: 80%;
        margin-left: 10rpx;
    }

    .right {
        float: right;
        margin-top: 10rpx
    }
}

// 加载提示文字
.loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
}
</style>
@/services/taglist
